<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客首页</title>
    <script src="/static/js/vue-2.7.14.js"></script>
    <script src="/static/js/axios-1.4.0.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

        nav {
            background-color: #2c3e50;
            color: white;
            padding: 15px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            position: relative;
        }

        nav .nav-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        nav .nav-center ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
        }

        nav .nav-center ul li a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        nav .nav-center ul li a:hover {
            color: #3498db;
        }

        nav .nav-login {
            margin-right: 20px;
        }

        nav .nav-login a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border: 1px solid white;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        nav .nav-login a:hover {
            background-color: white;
            color: #2c3e50;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 30px auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .article {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .article:hover {
            transform: translateY(-5px);
        }

        .article .article-content {
            padding: 20px;
        }

        .article h2 {
            margin-top: 0;
            color: #2c3e50;
        }

        .article .date {
            color: #7f8c8d;
            font-size: 0.9em;
            margin-bottom: 10px;
        }

        .article p {
            color: #34495e;
        }

        .article .read-more {
            display: inline-block;
            color: #3498db;
            text-decoration: none;
            margin-top: 10px;
            transition: color 0.3s ease;
        }

        .article .read-more:hover {
            color: #2980b9;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin: 30px 0;
            gap: 10px;
        }

        .pagination button {
            color: #2c3e50;
            padding: 8px 12px;
            text-decoration: none;
            border-radius: 4px;
            border: 1px solid #bdc3c7;
            background-color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .pagination button.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }

        .pagination button:hover:not(.active) {
            background-color: #ecf0f1;
        }

        .total-count {
            margin-left: 20px;
            color: #7f8c8d;
            font-size: 0.9em;
            border-radius: 4px;
            padding: 8px 12px;
        }
    </style>
</head>

<body>
<nav>
    <div class="nav-center">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
    <div class="nav-login" style="margin-left: auto;">
        <a href="http://localhost:8080/login" target="_blank">登录</a>
    </div>
</nav>
<div id="app">
    <div class="container">
        <div v-for="item in articles" class="article">
            <div class="article-content">
                <h2>{{ item.title }}</h2>
                <p class="date">{{ item.publishDate }}</p>
                <p>{{ item.description }}</p>
                <a :href="`http://localhost:8080/article?articleId=${item.articleId}`" target="_blank"
                   class="read-more">阅读详情</a>
            </div>
        </div>
    </div>
    <div class="pagination">
        <button @click="prevPage" :disabled="pageNum === 1">上一页</button>
        <button v-for="(page, index) in pagesArray" :key="index" :class="{ active: page === pageNum }"
                @click="changePage(page)">{{ page }}</button>
        <button @click="nextPage" :disabled="pageNum === pages">下一页</button>
        <span class="total-count">总记录数: <span>{{ total }}</span></span>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            articles: [
                { title: '文章标题1', publishDate: '2025-01-01', description: '文章描述1' }
            ],
            pageNum: 1, // 第几页
            pageSize: 9, // 页大小
            total: 10, // 总记录数
            pages: 1 // 总页数
        },
        computed: {
            pagesArray() {
                return Array.from({ length: this.pages }, (_, index) => index + 1);
            }
        },
        methods: {
            changePage(page) {
                this.pageNum = page;
                this.fetchArticleList();
            },
            prevPage() {
                if (this.pageNum > 1) {
                    this.pageNum--;
                    this.fetchArticleList();
                }
            },
            nextPage() {
                if (this.pageNum < this.pages) {
                    this.pageNum++;
                    this.fetchArticleList();
                }
            },
            async fetchArticleList() {
                try {
                    let response = await axios({
                        url: `http://localhost:8080/index/show?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
                        method: "GET"
                    });
                    console.log(response.data);
                    this.articles = response.data.records;
                    this.pageNum = response.data.current;
                    this.pageSize = response.data.size;
                    this.total = response.data.total;
                    this.pages = response.data.pages;
                } catch (error) {
                    console.error('请求文章数据时出错:', error);
                }
            }
        },
        mounted: async function () {
            try {
                let response = await axios({
                    url: `http://localhost:8080/index/show?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
                    method: "GET"
                });
                console.log(response.data);
                this.articles = response.data.records;
                this.pageNum = response.data.current;
                this.pageSize = response.data.size;
                this.total = response.data.total;
                this.pages = response.data.pages;
            } catch (error) {
                console.error('请求文章数据时出错:', error);
            }
        }
    })
</script>
</body>

</html>
